<!DOCTYPE html>
<html lang="zh-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta charset="gbk">
    <meta name="robots" content="all">
    <meta name="Copyright" content="Tencent">
    <meta name="baidu-site-verification" content="wWLCTcWmgC">
    <meta name="keywords" content="战队,战队详情,英雄联盟,lol,lol赛事,lpl,职业联赛,官方赛事,2019lpl,赛事">
    <meta name="description"
          content="战队详情，英雄联盟赛事官网，LPL职业联赛，全球总决赛，季中冠军赛，德玛西亚杯，国内外赛事，丰富的英雄联盟赛事资讯与各类大型赛事直播尽在英雄联盟赛事官方网站（lpl.qq.com）。">
    <title>AL俱乐部 - 英雄联盟赛事官网 - 腾讯游戏</title>
    <!-- 页面设计：cp | 页面制作：cp | 创建：2022-12-01 -->
    <link href="https://lpl.qq.com/web202301/css/common.css" rel="stylesheet">
    <link href="https://lpl.qq.com/web202301/css/team-detail.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    </script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 引入Echarts的库文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript" src="/login-starter/js/login.js"></script>
    <link rel="stylesheet" href="/login-starter/css/style.css">
    <style>.foot {
        background: #fff;
        color: #000;
        font: 12px/20px "微软雅黑", "宋体";
        min-width: 1050px;
        margin: 0 auto;
        text-align: left;
    }

    .foot_dark {
        background: #000;
        color: #494949
    }

    .foot_dark a {
        color: #494949
    }

    .foot_cpright {
        padding: 15px 20px
    }

    .foot_cpright:after {
        content: "";
        display: block;
        height: 0;
        line-height: 0;
        visibility: hidden;
        clear: both
    }

    .f_line {
        margin: 0 2px
    }

    .foot_lefts {
        float: left;
        display: inline
    }

    .foot_ieg_logo {
        float: left;
        width: 180px;
        height: 35px;
        text-indent: -999em;
        overflow: hidden;
        margin: 10px 0 0 10px;
        background: url(//game.gtimg.cn/images/js/2018foot/logo/foot-light.png)
    }

    .foot_dark .foot_ieg_logo {
        background: url(//game.gtimg.cn/images/js/2018foot/logo/foot-dark.png)
    }

    .foot_left {
        float: left;
        text-indent: -999em;
        overflow: hidden;
        margin: 10px 0 0 10px;
        width: 85px;
        height: 35px;
    }

    .foot_links {
        display: inline;
        float: right;
        width: 682px;
        list-style: none;
    }

    .foot_links li {
        line-height: 20px;
        overflow: hidden;
    }

    .copyright_zh a {
        padding-right: 10px
    }

    .foot_links .link_map {
        font-size: 0;
    }

    .foot_links .link_map .f_line:last-child {
        display: none
    }

    .foot_links .copyright_txt {
        font-size: 10px;
    }

    .foot_links .link_map span, .foot_links .link_map a {
        font-size: 12px;
        color: #494949
    }

    .foot_links li img {
        vertical-align: middle;
        margin-right: 3px;
        display: inline;
    }

    .foot_ratetext_inner {
        text-align: center;
        padding: 15px 20px 0;
        margin: 0
    }

    .foot_ratetext + .foot_cpright {
        padding: 0 20px 15px;
    }</style>
    <link href="https://ossweb-img.qq.com/images/js/milo_bundle/biz/dialogfloater.css?1667358833563" rel="stylesheet">
    <style id="roleselecter_style">.role_select {
        width: 240px;
    }

    .role_select li select {
        width: 220px;
    }

    .role_select {
        font: normal 12px Tahoma, "宋体";
        color: #222222;
        text-align: left;
        list-style: none;
        padding: 5px 0 0 5px;
        margin: 0px;
        margin-top: -5px;
    }

    .role_select li {
        *height: 50px;
        margin: 0px;
    }

    .role_select .error_message_li {
        height: 25px;
        display: none;
        color: #FF0000;
        clear: both;
    }

    .role_select li span {
        display: block;
        font-weight: normal;
        height: 22px;
        line-height: 22px;
    }

    .role_select li select, .role_select li input {
        *border: 1px solid #616162;
        float: left;
        margin-right: 3px;
    }

    .role_select li select {
        height: 22px;
    }

    .role_select li button {
        width: 75px;
        height: 25px;
    }

    .role_select .role_select_li {
        clear: both;
    }

    .role_select li.button {
        *height: 30px;
        clear: both;
    }</style>
    <style id="roleselecter_pip_style">#milo_policy_tips {
        width: 100%;
    }

    .milo_policy_allow {
        border: 1px solid #c1bdbd;
        color: white;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        padding: 2px;
        display: inline-block;
        margin-right: 10px;
        cursor: pointer;
        position: relative;
        top: 2px;
        box-sizing: content-box;
    }

    .milo_policy_allow_status {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: black;
    }

    .milo_policy_allow_text {
        user-select: none;
        cursor: pointer;
        font-size: 12px;
    }</style>
</head>
<body style="--center-width:1760px; --padding-left:0px; --zoom:0.698864;">
<h1 class="hid">战队详情</h1>

<div id="app">
    <login style="margin-top: 40px"></login>
    <div class="wrap page-team-detail">
        <div class="module module-team-detail" id="zoom-wrap" style="zoom: 0.698864;">
            <div class="team-detail-left">
                <div class="team-introduce">
                    <div class="team-logo">
                        <img :src="team.icon">
                    </div>
                    <div class="team-name">{{team.name}}</div>
                    <div class="team-desc">{{team.description}}</div>
                </div>

                <div class="team-data">
                    <div class="base-head">
                        <div class="base-title wihte">战队数据</div>

                        <div class="btn-box pr" data-index="0">
                            <a class="btn-switch pr active" href="javascript:;" v-on:click="handleSwitch('chart')"
                               data-type="chart">文字</a>
                            <a class="btn-switch pr" href="javascript:;" v-on:click="handleSwitch('text')"
                               data-type="text">六维图</a>
                        </div>
                    </div>
                    <div class="switch-content text" v-if=" activeType === 'text'" style="display: block">
                        <ul class="data-list" id="table-cell-list">
                            <li>
                                <div class="value">10.79</div>
                                <div class="label">场均击杀</div>
                                <div class="rank">联赛第 <span>15</span></div>
                            </li><li>
                            <div class="value">54253</div>
                            <div class="label">场均经济</div>
                            <div class="rank">联赛第 <span>12</span></div>
                        </li><li>
                            <div class="value">4.33</div>
                            <div class="label">场均推塔</div>
                            <div class="rank">联赛第 <span>17</span></div>
                        </li><li>
                            <div class="value">101.89</div>
                            <div class="label">场均插眼</div>
                            <div class="rank">联赛第 <span>9</span></div>
                        </li><li>
                            <div class="value">46.71</div>
                            <div class="label">场均排眼</div>
                            <div class="rank">联赛第 <span>12</span></div>
                        </li><li>
                            <div class="value">31:03</div>
                            <div class="label">场均时长</div>
                            <div class="rank">联赛第 <span>15</span></div>
                        </li><li>
                            <div class="value">43%</div>
                            <div class="label">一血率</div>
                            <div class="rank">联赛第 <span>15</span></div>
                        </li><li>
                            <div class="value">38%</div>
                            <div class="label">一塔率</div>
                            <div class="rank">联赛第 <span>15</span></div>
                        </li><li>
                            <div class="value">46%</div>
                            <div class="label">一龙率</div>
                            <div class="rank">联赛第 <span>11</span></div>
                        </li><li>
                            <div class="value">38%</div>
                            <div class="label">大龙控制率</div>
                            <div class="rank">联赛第 <span>14</span></div>
                        </li><li>
                            <div class="value">46%</div>
                            <div class="label">小龙控制率</div>
                            <div class="rank">联赛第 <span>12</span></div>
                        </li><li>
                            <div class="value">32%</div>
                            <div class="label">先锋控制率</div>
                            <div class="rank">联赛第 <span>17</span></div>
                        </li>
                        </ul>

                    </div>

                    <div class="switch-content chart active pr" v-if="activeType === 'chart'" style="display: block">
                        <div class="data-chart" _echarts_instance_="ec_1689770808404">
                            <canvas data-zr-dom-id="zr_0" width="762" height="500"
                                    style="position: absolute; left: 0px; top: 0px; width: 610px; height: 400px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                        </div>
                    </div>
                </div>

            </div>
            <div class="team-detail-right">
                <div class="team-detail-panel">
                    <div class="base-head">
                        <div class="base-title">现役选手</div>
                        <a href="javascript:;" class="btn-more-player prev" style="display: none">
                            <div class="icon-more-player prev"></div>
                            上一页
                        </a>
                        <a href="javascript:;" class="btn-more-player next" style="display: none">
                            更多选手
                            <div class="icon-more-player"></div>
                        </a>
                    </div>
                    <div class="player-container pr ovh">
                        <!--          id="player-list"-->
                        <ul class="player-list">
                            <li v-for="player in players">
                                <a :href="'http://127.0.0.1/yjh-player/player-detail.html?playerId=' + player.playerId">
                                    <div class="image">
                                        <img :src="player.photoUrl" alt="Zdz">
                                    </div>
                                    <div class="name">
                                        <div class="icon-position top"></div>
                                        <span>{{player.name}}</span>
                                    </div>
                                </a>
                            </li>

                        </ul>
                    </div>
                </div>

                <div class="team-detail-panel">
                    <div class="base-head">
                        <div class="base-title">比赛记录</div>
                    </div>

                    <div class="game-record">
                        <div class="record-head">
                            <div class="record-row">
                                <div class="record-col col-1">状态</div>
                                <div class="record-col">时间</div>
                                <div class="record-col">胜负</div>
                                <div class="record-col col-2">赛事</div>
                                <div class="record-col">赛事类型</div>
                                <div class="record-col">查看</div>
                            </div>
                        </div>
                        <ul class="record-body" id="list-content">
                            <li class="record-item status-ending lose" v-for="match in pagedMatches" :key="match.statisticsId">
                                <div class="record-row">
                                    <div class="record-col col-1">已结束</div>
                                    <div class="record-col">{{match.date}}</div>
                                    <div class="record-col">
                                        <div class="game-info">
                                            <div class="game-team">
                                                <div class="image">{{match.homeTeamName}}</div>
                                            </div>
                                            <div class="game-score right">
                                                <div class="score"><span>{{match.homeScore}}</span></div>
                                                <div class="dot"></div>
                                                <div class="score"><span>{{match.awayScore}}</span></div>
                                            </div>
                                            <div class="game-team">
                                                <div class="image">{{match.awayTeamName}}</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="record-col col-2">2023职业联赛</div>
                                    <div class="record-col">夏季赛常规赛</div>
                                    <div class="record-col">
                                        <div class="game-button-group">
                                            <a class="game-button playback-10362 playback"
                                               href="//lpl.qq.com/es/video_detail.shtml?nid=55571"
                                               onclick="MixSendClick('btn', 'match-10362-end-playback', '赛程-10362-已结束-精彩回放')"
                                               target="_blank">精彩回放</a>
                                            <a class="game-button info"
                                               href="//lpl.qq.com/es/stats.shtml?bmid=10362"
                                               onclick="MixSendClick('btn', 'match-10362-end-data', '赛程-10362-已结束-详细数据')">详细数据</a>
                                        </div>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        <div class="record-pagination">
                            <button @click="goToPreviousPage" :disabled="currentPage === 1">上一页</button>
                            <span>{{ currentPage }}</span>
                            <button @click="goToNextPage" :disabled="currentPage === totalPages">下一页</button>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- foot START -->
    <div class="foot-wrap" id="footWrap">
        <div class="foot_inner" id="gfooter" ams="32577/38060/m21789" age="18" dark="1" ieg-logo="1">
            <div class="foot foot_dark">
                <div class="foot_cpright">
                    <div class="foot_lefts"><a target="_blank" rel="noopener" href="//ieg.tencent.com/" title="腾讯互动娱乐"
                                               class="foot_ieg_logo">腾讯互动娱乐</a><a
                            onclick="pgvSendClick({hottag:'v3.foot.riot.link'})" href="javascript:" title="RIOT"
                            class="foot_left logo-riot">riot</a></div>
                    <ul class="foot_links">
                        <li class="link_map"><a target="_blank" rel="noopener" href="//ieg.tencent.com">腾讯互动娱乐</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="//game.qq.com/contract.shtml">服务条款</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="//game.qq.com/privacy_guide.shtml?ADTAG=gamepcbottom">隐私保护指引</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="//game.qq.com/privacy_guide_children.shtml?ADTAG=gamepcbottom">儿童隐私保护指引</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="https://careers.tencent.com/">腾讯游戏招聘</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="//kf.qq.com/">腾讯游戏客服</a><span class="f_line">|</span><a
                                target="_blank" rel="noopener"
                                href="//game.qq.com/web201910/introduce.html?ADTAG=gamepcbottom">游戏列表</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="https://www.tencent.com/zh-cn/partnership.html">广告服务及商务合作</a><span
                                class="f_line">|</span></li>
                        <li class="copyright_zh"><a target="_blank" rel="noopener"
                                                    href="//www.tencent.com/law/mo_law.shtml?/law/copyright.htm">腾讯公司版权所有</a><a
                                target="_blank" rel="noopener" href="//game.qq.com/self-discipline_pact.shtml">网络游戏行业防沉迷自律公约</a>
                        </li>
                        <li class="copyright_en"><p class="copyright_txt">COPYRIGHT ? 1998 - 2023 TENCENT. ALL RIGHTS
                            RESERVED.</p>
                            <p class="copyright_txt">COPYRIGHT ? 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p></li>
                        <li class="limit_age">本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。</li>
                        <li class="copyright_public"><a target="_blank" rel="noopener"
                                                        href="//szcert.ebs.org.cn/6917b6fe-b844-4e12-97c5-85b8d1df30ed"
                                                        title="深圳市市场监督管理局企业主体身份公示"><img
                                src="//game.gtimg.cn/images/js/2018foot/logo/gswj.png" width="15" height="15"
                                alt="深圳市市场监督管理局企业主体身份公示">工商网监电子标识 </a><span class="f_line">|</span><a target="_blank"
                                                                                                      rel="noopener"
                                                                                                      href="//www.qq.com/culture.shtml">粤网文[2020]3396-195号</a><span
                                class="f_line">|</span><a target="_blank" rel="noopener"
                                                          href="//game.qq.com/culture2.htm">（署）网出证（粤）字第054号</a></li>
                        <li class="copyright_private"> 批准文号：新出审字[2011]310号<span class="f_line">|</span>文网进字[2011]
                            004号<span class="f_line">|</span>出版物号：ISBN 978-7-89989-145-2<span class="f_line">|</span>全国文化市场统一举报电话：12318
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- foot END -->



<script src="https://lpl.qq.com//js.aq.qq.com/js/aq_common.js"></script>
<script src="https://lpl.qq.com//game.gtimg.cn/images/js/plugin/report/atReport.js" charset="UTF-8"></script>
<script>
    //此段代码不能放到外链JS中，
    var setSite = {
        //设置网站属性
        siteType: 'os', //必填项:"os"代表是官网，如果不是，则填写actName例如a20160701xxx
        pageType: 'team-detail', //必填项:本页面的定位；按照页面含义填写例如main||list||detail||download||share||page1||pageN,不支持点(.)、下划线(_)
        project: 'match', //选填项:如果是官网模块则是必填;按照模块内容，填写固定的对应值;官网或微社区base;同人站doujin;赛事match;故事站story;文化站history;粉丝站fans;爆料站coming;论坛bbs;皮肤skin;默认other;
        ingame: false, //选填项:默认根据浏览器类型获取是否属于游戏内，因英雄联盟端游客户端特殊性，所以英雄联盟端游客户端需求需要填写true.
        autoClick: false, //是否自动上报按钮&a的点击。选填项：默认false。非必要不开启
        autoAreaStay: false, //是否自动上报dom中填写dt-areaid的区域停留时长。选填项：默认false。非必要不开启
    };
    if (typeof LOL_SEND_DATA_FN_AT == 'function') {
        LOL_SEND_DATA_FN_AT();
    } //千万不能忘记！
</script>
<!-- commonJs START -->
<script src="https://lpl.qq.com//game.gtimg.cn/images/js/2018foot/foot.js"></script>
<script src="//game.gtimg.cn/images/js/eas/eas.js"></script>
<script src="https://lpl.qq.com/webplat/info/news_version3/32577/38060/m21789/index.js"></script>
<script src="https://lpl.qq.com//ossweb-img.qq.com/images/js/jquery/jquery-1.9.1.min.js"></script>
<script src="https://lpl.qq.com//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script src="https://lpl.qq.com/web201612/data/LOL_MATCH2_TEAM_LIST.js"></script>
<script src="https://lpl.qq.com/web202301/js/common.js?t=20230605"></script>
<!-- commonJs END -->
<script src="https://lpl.qq.com/web201612/data/LOL_MATCH2_GAME_LIST_BRIEF.js"></script>
<script src="https://lpl.qq.com/web202301/js/echarts.min.js"></script>
<script src="https://lpl.qq.com/web202301/js/team-detail.js"></script>


<div id="_overlay_"
     style="background-color: rgb(136, 138, 140); border-top: 1px solid rgb(136, 138, 140); position: absolute; height: 1148px; z-index: 9998; width: 100%; left: 0px; top: 0px; opacity: 0.7; display: none;"></div>
</body>
<div id="qbTrans-pageTrans-dialog" style="display: none;"><span class="qbTrans-pageTrans-dialog-success"
                                                                style="display: none;"></span> <span
        class="qbTrans-pageTrans-dialog-guide" style="display: none;"></span> <span
        class="qbTrans-pageTrans-dialog-text">是否将当前网页翻译成中文</span>
    <div id="qbTrans-pageTrans-dialog-btn" class="qbTrans-pageTrans-dialog-btn">网页翻译</div> <!----> <!----> <!---->
    <div class="qbTrans-pageTrans-dialog-close"><span class="qbTrans-pageTrans-dialog-close-text">关闭</span></div>
</div>

<script>
 var v=   new Vue({
        el: "#app",
        data: {
            players: [],
            team: {},
            matches:[],
            teamId: null,
            teamName: null,
            activeType: 'text' , // 默认显示chart类型
            currentPage: 1,    // 当前页码
            pageSize: 2
        },
     computed: {
         pagedMatches() {
             const startIndex = (this.currentPage - 1) * this.pageSize;
             const endIndex = startIndex + this.pageSize;
             return this.matches.slice(startIndex, endIndex);
         },
         totalPages() {
             return Math.ceil(this.matches.length / this.pageSize);
         }
     },
        methods: {
            queryPlayers(teamId) {
                axios.get("/yjh-team/yjh/players/players?team_id=" + this.teamId).then(res => {
                    this.players = res.data;
                })
            },
            queryTeam(teamId) {
                axios.get("/yjh-team/yjh/teams/queryOne?team_id=" + this.teamId).then(res => {
                    this.team = res.data;
                    this.teamName=res.data.name;
                    this.queryMatch();
                    console.log(this.teamName)
                })
            },
            queryMatch(){
                axios.get("/yjh-team/yjh/teams/selectMatchByName?teamName=" + this.teamName).then(res => {
                    this.matches = res.data.data;
                    console.log(this.matches);

                })
            },
            goToPreviousPage() {
                if (this.currentPage > 1) {
                    this.currentPage--;
                }
            },
            goToNextPage() {
                if (this.currentPage < this.totalPages) {
                    this.currentPage++;
                }
            },
            handleSwitch(type) {
                this.activeType = type;
                console.log('text'===type)
                // 在这里可以处理切换逻辑，比如请求不同类型的数据
            }
        },
        created() {
            // 获取URL参数的方法
            function getURLParameter(name) {
                name = name.replace(/[[]/, '\\[').replace(/[\]]/, '\\]');
                var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
                var results = regex.exec(location.search);
                return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
            }

            this.teamId = getURLParameter('teamId');
            console.log('teamId:', this.teamId);

            this.queryPlayers();
            this.queryTeam();
        }
    })

</script>

</html>